<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="setstatus">
        <i class="el-icon-plus"></i>新建排期
      </el-button>
    </div>
    <div class="seachinfo">
      <div class="oneitem">
        <div class="oneitemname">媒介</div>
        <el-select v-model="l_id" clearable style="width:250px;" placeholder="请选择">
          <el-option v-for="item in MJ_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="oneitem">
        <div class="oneitemname">频道</div>
        <el-select v-model="l_channel_id" style="width:250px;" placeholder="请选择">
          <el-option
            v-for="item in L_param.media"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="oneitem">
        <div class="oneitemname">节目</div>
        <el-select v-model="l_program_id" style="width:250px;" placeholder="请选择">
          <el-option
            v-for="item in L_param.program"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="oneitem">
        <div class="oneitemname">排期时间</div>
        <el-date-picker
          v-model="ht_start_time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="oneitem">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="seachlist"
          style="margin-left:30px;"
        >搜索</el-button>
      </div>
    </div>
    <div class="warps">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item v-for="(item,index) in pq_list" :key="index" :name="index">
          <template slot="title">
            <div class="title-top">
              <div class="top-left">
                <span class="text">{{item.cycel}}</span>
              </div>
              <div class="top-left top-right">
                <el-button type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button type="primary" icon="el-icon-upload2">输出</el-button>
              </div>
            </div>
          </template>
          <el-table
            :cell-style="$rowstyle"
            :header-cell-style="$headerstyle"
            :data="item.get_resources"
            border
            style="width: 100% margin-top:20px;"
          >
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="resources_name" label="城市" align="center" width="150"></el-table-column>
            <el-table-column prop="media_up_name" label="广告主" align="center"></el-table-column>
            <el-table-column prop="player_date" label="播放日期" align="center" width="120"></el-table-column>
            <el-table-column label="操作" align="center" width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">素材名称</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-size="100"
              layout="total, prev, pager, next"
              :total="1000"
            ></el-pagination>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- addstatus -->
    <div class="prop" v-if="addstatus">
      <div style="height:100px;width:100%"></div>
      <div class="warpprop" style="width:80%;height:600px;">
        <div class="propheader">
          新建排期
          <!-- <p class="close1" @click="setstatus">关闭</p> -->
          <el-button type="text" class="close1" @click="setstatus">关闭</el-button>
        </div>
        <div class="contenthint1">
          <div class="itemtow">
            <div class="oneitemname">排期时间</div>
            <el-date-picker
              v-model="l_start_time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
            ></el-date-picker>
            <span style="padding:0 5px;">~</span>
          </div>
          <div class="itemtow">
            <div class="oneitemname">广告主</div>
            <el-input style="width:250px;" v-model="ht_name"></el-input>
          </div>
          <div class="itemtow">
            <el-button
              type="primary"
              @click.native="seach_ht"
              style="margin-left:30px;"
              icon="el-icon-search"
            >搜索</el-button>
          </div>
        </div>
        <div class="selectlist">
          <el-table
            ref="multipleTable"
            border
            :data="HT_list"
            tooltip-effect="dark"
            style="width: 100%"
            :cell-style="$rowstyle"
            :header-cell-style="$headerstyle"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" align="center" width="55"></el-table-column>
            <el-table-column label="合同号" align="center" width="100">
              <template slot-scope="scope">{{ scope.row.code }}</template>
            </el-table-column>
            <el-table-column label="合同名称" align="center">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="周期" align="center">
              <template
                slot-scope="scope"
              >{{ scope.row.cycle.start_time +'~'+scope.row.cycle.end_time}}</template>
            </el-table-column>
            <el-table-column label="广告主" align="center">
              <template slot-scope="scope">{{ scope.row.get_media_up.name }}</template>
            </el-table-column>
            <el-table-column label="合同金额（万元）" align="center">
              <template slot-scope="scope">{{ scope.row.money }}</template>
            </el-table-column>
     
            <el-table-column label="制作时间" align="center">
              <template slot-scope="scope">{{ scope.row.created_at }}</template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleHTChange"
            :current-page.sync="ht_page"
            :page-size="4"
            layout="prev, pager, next, jumper"
            :total="ht_total"
          ></el-pagination>
        </div>
        <div class="raidoandsave">
          <el-checkbox v-model="checked">包含不可用资源</el-checkbox>
          <el-button type="primary" @click="makesacedule" style="margin-top:20px;">制作排期</el-button>
        </div>
      </div>
    </div>
    <div class="prop" v-if="ZY_STATUS">
      <div style="height:100px;width:100%"></div>
      <div class="warpprop" style="width:80%;height:600px;">
        <div class="propheader">
          新建排期
          <!-- <p class="close1">关闭</p> -->
          <el-button type="text" class="close1" @click="setZY_STATUS">关闭</el-button>
        </div>

        <div class="selectlist">
          <el-table
            ref="multipleTable"
            border
            :data="choose_zy_list.slice(startindex,endindex)"
            tooltip-effect="dark"
            style="width: 100%"
            :cell-style="$rowstyle"
            :header-cell-style="$headerstyle"
          >
            <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
            <el-table-column label="城市/资源" align="center" width="100">
              <template slot-scope="scope">{{ scope.row.get_medium_public.resources_name }}</template>
            </el-table-column>
            <el-table-column label="广告主" align="center">
              <template slot-scope="scope">{{ scope.row.contract.get_media_up.name }}</template>
            </el-table-column>
            <el-table-column label="播放日期" align="center">
              <template slot-scope="scope">{{ scope.row.contract.cycle_time}}</template>
            </el-table-column>
            <el-table-column label="备注" align="center">
              <template slot-scope="scope">{{ scope.row.remark }}</template>
            </el-table-column>
            <el-table-column label="编辑" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="deleteResource(scope.$index,scope.row)">删除</el-button>
                <el-button type="text" @click="a(scope)">编辑</el-button>
              </template>
            </el-table-column>

            <el-table-column label="素材" align="center">
              <!-- <template slot-scope="scope">{{ scope.row.created_at }}</template> -->
            </el-table-column>
          </el-table>
          <el-button type="text" @click.native="setaddZY">添加新资源</el-button>
          <el-pagination
            style="float:right;"
            @current-change="handleZYChange"
            :current-page.sync="choose_zy_page"
            :page-size="7"
            layout="prev, pager, next, jumper"
            :total="choose_zy_list.length"
          ></el-pagination>
        </div>
        <div class="raidoandsave1">
          <span>状态：</span>
          <el-radio v-model="radio" label="1">草稿</el-radio>
          <el-radio v-model="radio" label="2">提交</el-radio>
        </div>
        <div class="raidoandsave2">
          <el-button type="primary" @click="add_save_pq">保存</el-button>
          <el-button type="primary" @click.native="setZY_STATUS">返回重选</el-button>
        </div>
      </div>
    </div>
    <!-- addZY -->
    <div class="prop" v-if="addZY">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:700px;height:400px;">
        <div class="propheader">
          添加资源
          <el-button type="text" class="close1" @click.native="setaddZY">关闭</el-button>
        </div>

        <div class="zylist">
          <div class="zyitem">
            <div class="zyname">媒介</div>
            <el-select v-model="MJ_tablename" placeholder="请选择">
              <el-option
                v-for="item in MJ_list"
                :key="item.id"
                :label="item.name"
                :value="item.table_name"
              ></el-option>
            </el-select>
          </div>
          <div class="zyitem">
            <div class="zyname">频道</div>
            <el-select v-model="media_id" clearable placeholder="请选择">
              <el-option
                v-for="item in SearchObj.media"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="zyitem">
            <div class="zyname">节目</div>
            <el-select v-model="program_id" clearable placeholder="请选择">
              <el-option
                v-for="item in SearchObj.program"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="zyitem">
            <div class="zyname">资源类型</div>
            <el-select v-model="resources_id" filterable clearable placeholder="请选择">
              <el-option
                v-for="item in SearchObj.resources"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="zyitem">
            <div class="zyname">资源</div>
            <el-select v-model="choose_zy_id" placeholder="请选择">
              <el-option
                v-for="item in zy_list"
                :key="item.id"
                :label="item.resources_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="zyitem">
            <div class="zyname">广告主</div>
            <el-button type="text">{{GGZ_obj.name}}</el-button>

            <el-button type="text" @click.native="setchoicegg">选择广告主</el-button>
            <!-- <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>-->
          </div>
          <div class="zyitem" style="width:70%;">
            <div class="zyname">播放日期</div>
            <el-date-picker
              v-model="zy_time_len"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <div class="zyitem">
            <div class="zyname">时长(s)</div>
            <el-select v-model="often" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in timeList"
                :key="item.id"
                :label="item.long"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="zyitem">
            <div class="zyname">备注</div>
            <el-input type="textarea" :rows="2" v-model="textarea" style="width:64%"></el-input>
          </div>
        </div>

        <div class="raidoandsave2">
          <el-button @click="add_zy_save" type="primary">保存</el-button>
          <el-button type="primary" @click.native="setaddZY">取消</el-button>
        </div>
      </div>
    </div>

    <div class="prop propp" v-if="choice">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:700px;height:500px;">
        <div class="propheader">
          选择广告主
          <!-- <p class="close1" >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setchoicegg">关闭</el-button>
        </div>
        <div class="gg-seach">
          <div class="gg-name">检索关键字</div>
          <el-input style="width:200px;"></el-input>
          <el-button type="primary" style="margin:0 10px;" @click.native="GGZseach">检索</el-button>
          <el-button type="primary">新建</el-button>
        </div>
        <div class="gg-list">
          <el-table
            :data="GGZ_list"
            border
            :row-style="{height:'0px'}"
            :cell-style="{padding:'4px 0'}"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="city" label="城市" align="center"></el-table-column>
            <el-table-column prop="name" label="广告主" align="center"></el-table-column>
            <el-table-column prop align="center" label="联系人"></el-table-column>
            <el-table-column prop="mobile" label="电话" align="center"></el-table-column>
            <el-table-column prop="created_at" align="center" label="创建日期"></el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="clickselect(scope.row)"
                  type="text"
                  size="small"
                >{{scope.row.id==GGZ_obj.id?'取消选择':'选择'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block block1" style="justify-content: space-between;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="changGGZ"
              :current-page.sync="GGZ_page"
              :page-size="5"
              layout="prev, pager, next, jumper"
              :total="GGZ_alltotal"
            ></el-pagination>
          </div>
        </div>
        <div class="closesee" style="margin-top: 20px;">
          <el-button type="primary" @click.native="setchoicegg">关闭</el-button>
        </div>
      </div>
    </div>
    <img-See media_up_id="media_up_id" v-if="seestatus" @closeSee="closeSee"></img-See>
  </div>
</template>
<script>
import {
  Scheduing_list,
  getadd_resources,
  GETresource_list,
  Schedul_list,
  Contract_info_List,
  addScheduling,
  timeRange
} from "../../api/Salesman.js";
import { SETDATE, mediaList } from "../../api/System.js";
import { getAdvertising } from "@/api/Market.js";
import formatEveryDay from "./ResourceComponte/timeFormat.js";
import imgSee from "./scheduleComponents/imgSee.vue";
import moment from "moment";
export default {
  components: {
    imgSee
  },
  data() {
    return {
      MJ_tablename: "",
      addZY: false,
      choice: false,
      GGZ_list: [],
      GGZ_page: 1,
      value1: "",
      GGZ_alltotal: 0,
      HT_list: [],
      HT_list_OK: [],
      currentPage1: 1,
      activeNames: ["1"],
      media_up_id: "",
      value: "",
      checked: true,
      contractIdList: [],
      addstatus: false,
      seestatus: false,
      radio: "1",
      ht_start_time: "",
      ht_end_time: "",
      ht_name: "",
      ht_page: 1,
      ht_total: 0,
      ht_param: {
        name: "",
        start_time: "",
        end_time: "",
        per: 4
      },
      ZY_STATUS: false,
      MJ_list: [],
      SearchObj: {},
      //查询到的资源列表
      zy_list: [],
      media_id: "",
      program_id: "",
      resources_id: "",
      //列表查询媒介id
      l_id: "",
      l_channel_id: "",
      l_program_id: "",
      l_start_time: "",
      l_end_time: "",
      //列表处得到的下拉选项
      L_param: {},

      //排期列表
      pq_list: [],
      // 排期列表的参数|?
      list_param: {
        medium_id: "",
        channel_id: "",
        program_id: "",
        start_time: "",
        end_time: ""
      },

      //查询的资源列表
      choose_zy_list: [],
      choose_zy_page: 1,
      //  选中资源id
      choose_zy_id: "",
      startindex: 0,
      endindex: 7,
      //  选中的广告主对象
      GGZ_obj: {},
      zy_time_len: "",
      textarea: "",
      often: "",
      timeList: []
    };
  },
  created() {
    this.getScheduing_list();
    this.getmediaList();
    //获取排期列表
    this.getSchedul_list();
  },
  methods: {
    handleTimeList(id) {
      let data = {
        medium_public_id: id
      };
      timeRange({ ...data }).then(res => {
        if (res.code == 200) {
          this.timeList = res.data;
        } else {
          this.choose_zy_id = "";
          this.$message.error("获取资源时间错误，请重新选择");
        }
      });
    },
    add_save_pq() {
      console.log(this.choose_zy_list);
      let medium = {
        contact_id: [],
        cycle: [],
        resources: []
      };
      this.choose_zy_list.forEach(element => {
        if (element.isAdd) {
          let resources = {
            medium_public_id: "",

            media_up_id: "",

            cycle: "",

            cycle_range: ""
          };

          resources.medium_public_id = element.get_medium_public.id;
          resources.media_up_id = element.contract.get_media_up.id;
          resources.cycle_range = JSON.stringify({
            start_time: moment(element.upLoadTime[0]).unix(),
            end_time: moment(element.upLoadTime[1]).unix()
          });
          resources.cycle = JSON.stringify({
            type: 1,
            val: formatEveryDay(element.upLoadTime[0], element.upLoadTime[1])
          });
          medium.resources.push(resources);
        }
      });

      this.contractIdList.forEach(p => {
        medium.contact_id.push({
          contact_id: p
        });
      });

      medium.cycle = JSON.stringify({
        start_time: moment(this.l_start_time[0]).unix(),
        end_time: moment(this.l_start_time[1]).unix()
      });
      console.log(medium);
      addScheduling({ ...medium }).then(res => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.setZY_STATUS();
          this.setstatus();
          this.getScheduing_list();
          this.getmediaList();
          //获取排期列表
          this.getSchedul_list();
        }
      });
    },
    //添加资源保存
    add_zy_save() {
      if (this.zy_time_len.length < 2) {
        this.$message({
          message: "播放日期不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.choose_zy_id) {
        this.$message({
          message: "资源不能为空",
          type: "warning"
        });
        return;
      }
      var item = {};
      this.zy_list.forEach(element => {
        if (element.id == this.choose_zy_id) {
          item = element;
        }
      });
      console.log(item);
      var cycle = {
        start_time: moment(this.zy_time_len[0]).unix(),
        end_time: moment(this.zy_time_len[1]).unix()
      };
      let timeArr = [this.zy_time_len[0], this.zy_time_len[1]];
      //  cycle=JSON.stringify(cycle)
      console.log(this.GGZ_obj);
      var obj = {
        contract: {
          cycle_time: timeArr[0] + "-" + timeArr[1],
          get_media_up: this.GGZ_obj
        },
        often: this.often,
        get_medium_public: item,
        remark: this.textarea,
        upLoadTime: timeArr,
        isAdd: true
      };
      this.choose_zy_list.push(obj);
      this.setaddZY();
      this.often = "";
    },

    //点击选择广告主
    clickselect(row) {
      if (row.id == this.GGZ_obj.id) {
        this.GGZ_obj = {};
      } else {
        this.GGZ_obj = row;
      }
    },
    deleteResource(index, data) {
      this.choose_zy_list.splice(index, 1);
    },
    //查询的资源分页
    handleZYChange(e) {
      this.choose_zy_page = e;
      this.startindex = this.choose_zy_page * 7 - 7;
      this.endindex = this.choose_zy_page * 7;
    },
    //点击搜素列表
    seachlist() {
      var list_param = {
        medium_id: this.l_id,
        channel_id: this.l_channel_id,
        program_id: this.l_program_id,
        start_time: this.l_start_time[0] / 1000,
        end_time: this.l_start_time[1] / 1000
      };
      this.list_param = list_param;
      this.getSchedul_list();
    },
    //获取排期列表
    getSchedul_list() {
      Schedul_list(this.list_param).then(res => {
        if (res.code == 200) {
          this.pq_list = [];
          for (const key in res.data) {
            if (res.data.hasOwnProperty(key)) {
              const element = res.data[key];
              this.pq_list.push(element);
            }
          }
        }
      });
    },
    //获取资源
    GETresourceList() {
      var data = {};
      data.table_name = this.MJ_tablename;
      data.media_id = this.media_id;
      data.program_id = this.program_id;
      this.resources_id = this.resources_id;
      data.page = 1;
      data.per = 99999;
      GETresource_list(data).then(res => {
        if (res.code == 200) {
          this.zy_list = res.data.data;
        }
      });
    },
    //获取筛选条件选择资源
    getSeach() {
      getadd_resources({ table_name: this.MJ_tablename }).then(res => {
        if (res.code == 200) {
          //清空所选值
          this.MJ_tablename = this.MJ_list[0].table_name;

          this.SearchObj = res.data.data_array;
        }
      });
    },
    //获取筛选条件选择资源查询列表
    getlistSeach(name) {
      getadd_resources({ table_name: name }).then(res => {
        if (res.code == 200) {
          //清空所选L_param值
          this.L_param = res.data.data_array;
          this.L_param.media.push({
            id: "",
            name: "不限"
          });
          this.L_param.program.push({
            id: "",
            name: "不限"
          });
        }
      });
    },
    //获取媒介结构列表
    getmediaList() {
      mediaList().then(res => {
        if (res.code == 200) {
          this.MJ_list = res.data.mediums;
          this.MJ_list.push({
            id: "",
            name: "不限"
          });
          this.MJ_tablename = this.MJ_list[0].table_name;
        }
      });
    },
    //添加资源弹框
    setaddZY() {
      this.media_id = "";
      this.MJ_tablename = "";
      this.program_id = "";
      this.resources_id = "";
      this.choose_zy_id = "";
      this.GGZ_obj = {};
      this.often = "";
      this.textarea = "";
      this.zy_time_len = "";
      this.addZY = !this.addZY;
    },
    //资源列表弹框
    setZY_STATUS() {
      this.ZY_STATUS = !this.ZY_STATUS;
    },
    //点击制作排期
    unique(arr) {
      return Array.from(new Set(arr));
    },
    makesacedule() {
      if (this.l_start_time == "") {
        this.$message({
          message: "请选起止时间",
          type: "warning"
        });
        return;
      }
      if (this.HT_list_OK.length < 1) {
        this.$message({
          message: "请选合同",
          type: "warning"
        });
        return;
      }
      var arr = [];
      this.HT_list_OK.forEach(element => {
        arr.push(element.id);
      });
      this.contractIdList = this.unique(arr);
      Contract_info_List({ ids: this.unique(arr) }).then(res => {
        if (res.code == 200) {
          this.choose_zy_list = res.data;
          this.setZY_STATUS();
        }
      });
      // this.setZY_STATUS()
    },
    changGGZ(e) {
      this.GGZ_page = e;
      this.getGGZlist();
    },
    //获取广告主列表
    getGGZlist() {
      let data = {
        name: this.GGZ_name,
        per: 5,
        page: this.GGZ_page
      };
      getAdvertising(data).then(res => {
        if ((res.code = 200)) {
          this.GGZ_list = res.data.data;
          this.GGZ_list.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
          });

          this.GGZ_alltotal = res.data.total;
          this.GGZ_page = res.data.current_page;
        }
      });
    },
    //广告主检索
    GGZseach() {
      this.GGZ_page = 1;
      this.GGZ_alltotal = 0;
      this.getGGZlist();
    },
    //关闭广告主弹框
    setchoicegg() {
      if (!this.choice) {
        this.getGGZlist();
      }

      this.choice = !this.choice;
    },
    //点击合同搜索
    seach_ht() {
      let data = {
        name: this.ht_name,
        start_time: this.ht_start_time[0] / 1000,
        end_time: this.ht_start_time[0] / 1000,
        per: 4
      };
      this.ht_param = data;
      this.getScheduing_list();
    },
    //合同列表
    getScheduing_list() {
      this.ht_param.page = this.ht_page;
      Scheduing_list(this.ht_param).then(res => {
        if (res.code == 200) {
          this.ht_page = res.data.current_page;
          this.ht_total = res.data.total;
          this.HT_list = res.data.data;
          this.HT_list.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
            element.cycle = JSON.parse(element.cycle);
            for (const key in element.cycle) {
              if (element.cycle.hasOwnProperty(key)) {
                const el = element.cycle[key];
                element.cycle[key] = SETDATE(el, true);
              }
            }
          });
        }
      });
    },
    setstatus() {
      this.addstatus = !this.addstatus;
    },
    closeSee() {
      this.seestatus = !this.seestatus;
    },
    //合同页数变化
    handleHTChange(e) {
      this.ht_page = e;
      this.getScheduing_list();
    },
    handleSelectionChange(row) {
      //去掉当前页选中的
      for (let index = 0; index < this.HT_list_OK.length; index++) {
        const element = this.HT_list_OK[index];
        this.HT_list.forEach(el => {
          if (element.id == el.id) {
            this.HT_list_OK.splice(index, 1);
          }
        });
      }
      if (row.length > 0) {
        this.HT_list_OK = this.HT_list_OK.concat(row);
      }
    },
    selectrow(e, row) {
      //  console.log(e)
      //  console.log(row)
    },
    handleChange(val) {
      console.log(val);
    },
    handleClick(row) {
      this.media_up_id = row.media_up_id;
      this.closeSee();
    },

    handleCurrentChange(e) {
      console.log(e);
    },
    handleSizeChange(e) {
      console.log(e);
    }
  },
  computed: {
    backResource() {
      return this.choose_zy_id;
    }
  },
  watch: {
    backResource(val, oldVal) {
      if (val != "") {
        this.handleTimeList(val);
      }
    },
    MJ_tablename: function() {
      this.getSeach();
      this.resources_id = "";
      this.program_id = "";
      this.media_id = "";
      this.GETresourceList();
    },
    media_id: function() {
      this.GETresourceList();
    },
    program_id: function() {
      this.GETresourceList();
    },
    resources_id: function() {
      this.GETresourceList();
    },
    l_id: function() {
      this.l_channel_id = "";
      this.l_program_id = "";
      var name = "";
      if (!this.l_id) {
        return;
      }
      this.MJ_list.forEach(element => {
        if (element.id == this.l_id) {
          name = element.table_name;
        }
      });

      this.getlistSeach(name);
      // this.GETresourceList()
    }
  }
};
</script>
<style lang="scss" scope>
.warps {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
}
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.seachinfo {
  width: 97%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .oneitem {
    display: flex;
    margin-top: 20px;
    align-items: center;
    flex-direction: row;
    .oneitemname {
      width: 100px;
      margin-left: 20px;
    }
  }
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 600px;
  height: 450px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .contenthint1 {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .itemtow {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .oneitemname {
        width: 100px;
        margin-left: 20px;
      }
    }
  }
  .selectlist {
    width: 95%;
    margin: 0 auto;
    margin-top: 20px;
  }
  .zylist {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .zyitem {
      width: 50%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .zyname {
        font-size: 14px;
        width: 90px;
      }
    }
  }
  .raidoandsave1 {
    width: 95%;
    margin: 0 auto;
    font-size: 14px;
    margin-top: 20px;
  }
  .raidoandsave {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 100px;
  }
  .raidoandsave2 {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 100px;
  }
  .versions {
    // display: flex;
    width: 97%;
    margin: 0 auto;
    margin-top: 10px;
    // .versionsleft{
    //   flex: 1;
    // }
    /deep/ .el-tabs__nav-scroll {
      max-width: 170px;
    }
    .versionsright {
      width: 300px;
      height: 200px;
      background: red;
    }
  }
  .closesee {
    width: 50px;
    margin: 0 auto;
    margin-top: 20px;
  }
}
.title-top {
  width: 100%;
  height: 100%;
  // background: red;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .top-left {
    display: flex;
    .text {
      font-size: 14px;
      text-decoration: underline;
      color: blue;
    }
    .hint {
      padding: 5px 5px;
    }
  }
}
.propp {
  z-index: 999;
}
.gg-seach {
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 10px;
  .gg-name {
    width: 100px;
    font-size: 14px;
  }
}
.gg-list {
  width: 90%;
  margin: 0 auto;
  height: 270px;
  margin-top: 20px;
}
</style>